import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../common/style/colors.dart';

class NavTabBox extends StatefulWidget {
  final Color backgroundColor;
  final List<NavTabItem> tabs;
  final int selectedIndex;
  final ValueChanged<int>? onTabChange;
  final ValueChanged<int>? onTab;
  const NavTabBox(
      {Key? key,
      this.backgroundColor = Colors.white,
      required this.tabs,
      this.selectedIndex = 0, this.onTabChange, this.onTab})
      : super(key: key);

  @override
  _NavTabBoxState createState() {
    return _NavTabBoxState();
  }
}

class _NavTabBoxState extends State<NavTabBox> {
  late int selectedIndex;
  bool clickable = true;
  @override
  void initState() {
    super.initState();
    selectedIndex = widget.selectedIndex;
  }

  @override
  void didUpdateWidget(NavTabBox oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.selectedIndex != oldWidget.selectedIndex) {
      selectedIndex = widget.selectedIndex;
    }
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 45.h,
      decoration: BoxDecoration(color: widget.backgroundColor),
      child: Row(
        //设置水平方向排列
        children: widget.tabs
            .map((e) => Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      InkWell(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              e.title,
                              style: selectedIndex == widget.tabs.indexOf(e)
                                  ? TextStyle(
                                      color: AppColors.primary, fontSize: 14.sp)
                                  : TextStyle(
                                      color: AppColors.color66,
                                      fontSize: 14.sp),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 4.h),
                              width: 24.w,
                              height: 2.h,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(2.r),
                                  color: selectedIndex == widget.tabs.indexOf(e)
                                      ? AppColors.primary
                                      : Colors.transparent),
                            )
                          ],
                        ),
                        onTap: () {

                          if(selectedIndex != widget.tabs.indexOf(e)){
                            print(widget.tabs.indexOf(e));
                            widget.onTabChange?.call(selectedIndex);
                            onTabChange(widget.tabs.indexOf(e)) ;
                          }

                          widget.onTab?.call(selectedIndex);


                        },
                      ),
                      e.dot>0?
                      Container(
                        margin: EdgeInsets.only(top: 10.h),
                        height: 12.r,
                        width: getDotWidth(e.dot.toString().length),
                        padding: EdgeInsets.symmetric(
                            horizontal: 2.w, vertical: 1.h),
                        alignment: Alignment.center,
                        decoration: const BoxDecoration(
                            color: Colors.red,
                            borderRadius:
                                BorderRadius.all(Radius.circular(10))),
                        child: Text(
                          e.dot.toString(),
                          style: TextStyle(color: Colors.white, fontSize: 8.sp),
                        ),
                      ):Container(),
                    ],
                  ),
                ))
            .toList(),
      ),
    );
  }

  double getDotWidth(int length) {
    if (length == 1) {
      return 12.r;
    } else if (length == 2) {
      return 16.r;
    } else if (length == 3) {
      return 20.r;
    } else if (length == 4) {
      return 24.r;
    } else {
      return 8.r;
    }
  }

  void onTabChange(int indexOf) {
    setState(() {
      selectedIndex = indexOf;
    });
  }
}
class NavTabItem {
  int index;
  String title;
  String activeIcon;
  int dot;
  NavTabItem({
    this.index = 0,
    this.title = '',
    required this.activeIcon,
    this.dot = 0,
  });
}